<!--
 * @Description: 
 * @Author: zwx
 * @Date: 2024-11-05 16:04:25
 * @LastEditors: zwx
 * @LastEditTime: 2024-11-06 14:54:18
 * @又活了一天: 你真厉害！！！
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网上书城</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: hsl(0, 0%, 100%);
            padding: 10px;
            text-align: left; 
            display: flex;
            justify-content: space-between; /* 使用 space-between 来分配空间 */
        }
        .header .header-logo {
            margin-right: auto; /* 将 logo 靠左 */
        }
        .header-links {
            margin-left: 20px; /* 为链接组添加左边距 */
        }
        .header .cart-image {
            margin-right: 10px; /* 设置购物车图片的右边距 */
        }
        .footer {
            background-color: #e0d2b4;
            color: rgb(14, 13, 13);
            padding: 10px;
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中对齐 */
        }
         .footer img {
         margin-left: 100px; /* 为图片添加左边距 */
         }
        .nav {
            background-color: #1c5828;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .nav1 {
            background-color: #b2a072;
            color: rgb(0, 0, 0);
            padding: 10px;
            text-align: right;
        }
        .nav2 {
            background-color: #f7f9f8;
            padding: 10px;
            text-align: center;
        }
        .nav a {
            color: rgb(248, 248, 248);
            margin: 0 10px;
            text-decoration: none;
        }
        .nav a:last-child {
         color: yellow; /* 最后一个链接的颜色设置为黄色 */
}
        .main-content {
            border: 2px solid #9b9c9b; /* 绿色边框 */
            padding: 10px; /* 内边距 */
            /* margin: 20px 0; 上下外边距 */
            width: 800px; /* 固定宽度为800像素 */
            margin: 0 auto; /* 上下外边距为0，左右自动（居中） */
            background-color: #e6e3d1;
        }
        .product-list {
         display: grid;
         grid-template-columns: repeat(4, 1fr); /* 创建四列，每列占据相同的空间 */
         grid-gap: 10px; /* 设置网格项之间的间距 */
         justify-content: center; /* 使网格项在容器中居中对齐 */
        }
        .product {
            width: 150px;
            margin: 10px;
            text-align: center;
        }
        .product img {
            width: 100%;
            height: auto;
        }
        .pagination {
            text-align: center;
            margin: 20px 0;
        }
        .pagination a {
            margin: 0 5px;
            text-decoration: none;
            color: blue;
        }
        .category-title {
         font-weight: bold; /* 加粗字体 */
         border-bottom: 2px solid #000; /* 添加横线 */
         padding-bottom: 5px; /* 横线与文字之间的距离 */
         margin-bottom: 10px; /* 横线与下面内容的距离 */
         }

        .category-bold {
         font-weight: bold; /* 加粗字体 */
         }

        .category-normal {
         font-weight: normal; /* 不加粗字体 */
         }

        .category-subtitle {
         display: flex;
         justify-content: space-between; /* 在两端分配内容 */
         border-bottom: 2px solid #000; /* 添加横线 */
         padding-bottom: 5px; /* 横线与文字之间的距离 */
         margin-bottom: 10px; /* 横线与下面内容的距离 */
         margin-left: 10px; /* 根据需要调整与标题的间距 */
         }
    </style>
</head>
<body> 

    <div class="header">
        <div class="header-logo">
            <img src="bookimages/logo.png" alt="Header Image" class="header-image">
        </div>
        <div style="display: flex; align-items: center;">
            <img src="bookimages/cart.gif" alt="Shopping Cart" class="cart-image">
            <div class="header-links">
                <a href="your-shopping-cart-url">购物车</a>|
                <a href="your-help-center-url">帮助中心</a>|
                <a href="your-account-url">我的账户</a>|
                <a href="your-register-url">新用户注册</a>
            </div>
        </div>
    </div>
   
    

</div>

<div class="nav">
    <a href="#">文学</a>
    <a href="#">生活</a>
    <a href="#">计算机</a>
    <a href="#">外语</a>
    <a href="#">经管</a>
    <a href="#">励志</a>
    <a href="#">社科</a>
    <a href="#">学术</a>
    <a href="#">少儿</a>
    <a href="#">艺术</a>
    <a href="#">原版</a>
    <a href="#">科技</a>
    <a href="#">考试</a>
    <a href="#">生活百科</a>
    <a href="#">全部目录商品</a>
</div>

<div class="nav1">
    Search<input type="text" placeholder="Search">
    <button style="height: 0;padding: 0; margin: 0; border: none;">
        <img src="bookimages/serchbutton.gif">
    </button>
</div>

<div class="nav2">
    <p>首页&gt;旅游&gt;图书列表</p>
    </div>
    <div class="main-content">
        <p class="category-title">商品目录</p>
        <div class="category-subtitle">
        <p>
        <span class="category-bold">计算机类</span>
        <span class="category-normal">共100种商品</span>
        </p>
        </div>

       
    <img src="bookimages/productlist.gif">
<div class="product-list">
    <div class="product">
        <img src="bookcover/101.jpg" alt="时空穿行">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
    <div class="product">
        <img src="bookcover/102.jpg" alt="感悟">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
    <div class="product">
        <img src="bookcover/103.jpg" alt="影响力">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
    <div class="product">
        <img src="bookcover/104.jpg" alt="BOYS">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
    
    <div class="product">
        <img src="bookcover/105.jpg" alt="别做正常的">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
    <div class="product">
        <img src="bookcover/106.jpg" alt="学会宽容">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
    <div class="product">
        <img src="bookcover/107.jpg" alt="大通和小花">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
    <div class="product">
        <img src="bookcover/TS10.jpg" alt="谁动了我的">
        <p>书名: xxx</p>
        <p>售价: xxx</p>
    </div>
  </div>

<div class="pagination">
    <a href="#">上一页</a>
    <a class= "checked select" href="#">1</a>
    <a class= "checked" href="#">2</a>
    <a class= "checked" href="#">3</a>
    <a class= "checked" href="#">4</a>
    <a class= "checked" href="#">5</a>
    <a class= "checked" href="#">6</a>
    <a href="#">下一页</a>
   </div>
</div>
<div class="nav2">
    <br>
</div>

<div class="footer">
    <img src="bookimages/logo.png">
    
    <p style="margin-left: 50px;">CONTACT US 
        <br>
        copyright 2008© BookStore All Rights RESERVED</p>

</div>
</body>
</html>